<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style>
			.box {
				position: relative;
				widows: 100px;
				height: 281px;
				border-width: 70px 80px;
				border: 30px solid #666;
				overflow: hidden;
				transition-property: width;
				transition-duration: 5s;
			}
			.box:hover{
				width: 700px;
			}
			.box1 {
				position: absolute;
				right: 0;
				width: 650px;
			}
			
			.box1:hover {
				width: 700px;
			}
			
			.box3 {
				position: relative;
				width: 300px;
				height: 200px;
				border-width: 70px 80px;
				border-style: solid;
				border-color: red;
				border-image: url(img/57.jpg) 90 repeat;
				overflow: hidden;
				transition-property: width;
				transition-duration: 5s;
			}
			.box3:hover {
				width: 700px;
			}
			.poem {
				position: absolute;
				right: 0;
				height: 290px;
				width: 1700px;
			}
			.poem1 {
				position: absolute;
				right: 0;
				height: 200px;
				width: 700px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="box1">
				<img src="img/53.jpg" alt="" class="poem" />
			</div>
		</div>
		<div class="box3">
			<img src="img/50.jpg" alt="" class="poem1" />
		</div>
	</body>

</html>